<template>
	<view>
		<!-- 活动信息 -->
		<view class="active-item-top mlr-26 mtb-22 bg-c-f2 br-18">
			<image class="active-item-header"  :src="detail.picFirst"></image>
			<view class="active-item-right">
				<view class="active-item-right-text">
					<view>{{detail.title}}</view>
				</view>
				<view class="active-addr">
					<tui-icon name="gps" size="12" color="#666"></tui-icon>
					<text v-if="detail.distanceShow">&nbsp;{{detail.distanceShow}}&nbsp;&nbsp;|&nbsp;&nbsp;</text>
					<text>&nbsp;{{detail.locationName}}</text>
				</view>
				<view class="active-time">
					<tui-icon name="time" size="12" color="#666"></tui-icon>
					<text>&nbsp;{{detail.dateShow}}</text>
				</view>
				<view class="active-shop">
					<image :src="detail.userHeadPic"></image>&nbsp;
					<text>{{detail.userName}}</text>
				</view>
			</view>
		</view>

		<!-- 报名信息 -->
    <view class="title">报名信息</view>
		<view class="merber-box mlr-26 mtb-22 bg-c-f2 br-18">
			<view class="member-cell">
				<text>昵称</text>
<!--				<text>{{ userInfo?.nickname || '-' }}</text>-->
        <input type="text"
               :auto-blur="false"
               :data-id="userInfo.nickname"
               :value="userInfo.nickname"
               @input="e=>handleInput(e, 'nickname')"
               placeholder="请输入昵称"
               style="font-size: 30rpx;color: #333;height: 42rpx; line-height: 42rpx; padding: 0 24rpx;text-align: right;"
               placeholder-style="font-size: 30rpx;color: #999999;font-weight: 400;text-align: right;" />
			</view>
			<view class="member-cell" @click="openGender">
				<text>性别</text>
				<text>{{ userInfo?.gender ? (userInfo?.gender === 1 ? '男' : '女') : '请选择' }}</text>
			</view>
      <u-picker
          :value="userInfo.gender"
          :show="showGender"
          @close="closeGender"
          @cancel="closeGender"
          @confirm="handleGenderChange"
          :closeOnClickOverlay="true"
          :columns="genders"
          keyName="label"
          confirmColor="#333"
          cancelColor="#333"/>
			<view class="member-cell">
				<text>手机号</text>
<!--				<text>{{ userInfo?.phone || '-' }}</text>-->
        <input type="text"
               :auto-blur="false"
               :data-id="userInfo.userPhone"
               :value="userInfo.userPhone"
               @input="e=>handleInput(e, 'userPhone')"
               placeholder="请输入手机号"
               style="font-size: 30rpx;color: #333;height: 42rpx; line-height: 42rpx; padding: 0 24rpx;text-align: right;"
               placeholder-style="font-size: 30rpx;color: #999999;font-weight: 400;text-align: right;" />
			</view>
      <view class="member-cell">
        <text>真实姓名</text>
        <input type="text"
               :auto-blur="false"
               :data-id="detail.realName"
               :value="userInfo.realName"
               @input="e=>handleInput(e, 'realName')"
               placeholder="请输入真实姓名"
               style="font-size: 30rpx;color: #333;height: 42rpx; line-height: 42rpx; padding: 0 24rpx;text-align: right;"
               placeholder-style="font-size: 30rpx;color: #999999;font-weight: 400;text-align: right;" />
      </view>
      <view class="member-cell">
        <text>身份证号</text>
        <input type="text"
               :auto-blur="false"
               :data-id="detail.idCardNumber"
               :value="userInfo.idCardNumber"
               @input="(e)=>handleInput(e, 'idCardNumber')"
               placeholder="请输入身份证号"
               style="font-size: 30rpx;color: #333;height: 42rpx; line-height: 42rpx; padding: 0 24rpx;text-align: right;"
               placeholder-style="font-size: 30rpx;color: #999999;font-weight: 400;text-align: right;" />
      </view>
		</view>

    <view class="title">退款规则</view>

    <view class="merber-box mlr-26 mtb-22 bg-c-f2 br-18">
      <!-- 退款规则 -->
      <view class="box p-22 mb-18">
        <view class="content" v-if="detail.cancelFreeTypeDesc">该活动有无责取消申明,在 {{ detail.cancelFreeTypeDesc }} 前可以无责取消，超过时间，将不可取消</view>
        <view class="content" v-if="!detail.cancelFreeTypeDesc">该活动报名后不可取消</view>
      </view>
    </view>

    <view class="title">免责声明</view>

    <view class="merber-box mlr-26 mtb-22 bg-c-f2 br-18">
      <!-- 退款规则 -->
      <view class="box p-22 mb-18">
        <view class="content">因活动造成的损伤风险及财产安全均自行承担，平台及活动组织方无任何责任，报名成功即表示同意受本声明约束</view>
      </view>
    </view>
    <!-- <view class="merber-box mlr-26 mtb-22 bg-c-f2 br-18" v-if="!this.userInfo.subscribeMp">
      <official-account></official-account>
    </view> -->
		<tui-attention></tui-attention>
		
		<u-modal :show="showModal" title="提示" content='为方便报名人联系到您,请填写联系电话,我们会严格保密,只有报名成功的用户查看' confirmText="前往填写" cancelText="取消" :showCancelButton="false" confirmColor="#F73D00" @confirm="sureConfirm"></u-modal>

		<view style="height: 350rpx;"></view>

    <!-- 底部 -->
		<view class="footer-box">
			<view class="footer">
				<image :src="checked ? 'https://static.wddzq.com/static/check_y.png' : 'https://static.wddzq.com/static/check_b.png'" @click="handleCheckClick"></image>
				<text  @click="handleCheckClick">我已阅读并同意</text>
				<text @click="openBaomingxuzhi">《报名须知》</text>
			</view>
			<view class="footer-btns">
				<view >
					<view class="footer-left" v-if="detail.chargeType === 1">
            <view class="share-btn-bm" style="font-size: 28rpx;color: #FFB803;" v-if="detail.payWay === 1">
              <text style="font-size: 24rpx;">¥</text>
              <text>{{ detail?.payPrice }}</text>
            </view>
            <view class="share-btn-bm" style="font-size: 28rpx;color: #FFB803;" v-if="detail.payWay === 2">
              <text>线下支付</text>
            </view>
            <view style="font-size: 24rpx;color: #AAAAAA;" v-if="detail.discountType ===1 && detail.discountedPrice > 0">优惠 -{{ detail.discountedPrice }}</view>
            <view style="font-size: 24rpx;color: #AAAAAA;" v-else>暂无优惠</view>
					</view>
          <view class="footer-left" v-if="detail.chargeType === 2">
            <view class="share-btn-bm" style="font-size: 28rpx;color: #FFB803;padding-top: 20rpx;">
              <text>免费</text>
            </view>
          </view>
				</view>
				<u-button v-if="checked" class="footer-btn" @click="handleSubmit" customStyle="height: 88rpx;border-radius: 44rpx;" color="#1c1c1e" text="提交报名"></u-button>
				<u-button v-else class="footer-btn" @click="handleSubmit" customStyle="height: 88rpx;border-radius: 44rpx;background-color: #aaa;border: 1rpx solid #aaa;" color="#fff" text="提交报名"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getActivityDetail, userSignUpActivity } from '../../config/api.js';
	import { to, getUserInfoDetail } from '../../config/utils.js';
	export default {
		data() {
			return {
				params: '',
				detail: {},
				userInfo: '',
				checked: false,
				showModal: false,
        showGender: false,
        genders: [
          [{
            label: '我是帅哥',
            value: '1'
          }, {
            label: '我是美女',
            value: '2'
          }]
        ],
			}
		},
		onLoad(params) {
			this.params = params;
		},
		onShow() {
			// 判断微信是否填写
			if(!getUserInfoDetail()?.contactPhone) {
				this.showModal = true;
			} else {
				this.showModal = false;
			}
		},
		onReady() {
			this.getUserinfoData();
			this.fetchActivityDetail();
		},
		methods: {
      handleGenderChange(e) {
        const { value } = e;
        const { value: _value } = value[0];
        this.userInfo = {
          ...this.userInfo,
          gender: _value,
        }
        this.showGender = false;
      },
      openGender(){
        return uni.showToast({
          title: '禁止修改性别',
          icon: 'none'
        })
        // this.showGender = true;
      },
      closeGender(){
        this.showGender = false;
      },
      genderChange(e){
        console.log('>>>>>>>>>>>>e', e);
      },
      handleInput(e, keyName) {
        this.userInfo[keyName] = e.detail.value;
      },

			sureConfirm() {
				uni.navigateTo({
					url: `/pages/my-info/my-info`
				})
			},
			handleCheckClick() {
				this.checked = !this.checked;
			},
      openBaomingxuzhi(){
        let actionUrl = "https://mp.weixin.qq.com/s?__biz=MzkwMjUwMDE4Mg==&mid=2247483766&idx=1&sn=a32078608a2ee3abbf0756023051f20a&chksm=c0a5db4ff7d252598d01b09a76f42052becde4648249d542794c7a393563351a63d5fbca45e4#rd";
        uni.navigateTo({
          url: `/pages/webview/webview?url=` + encodeURIComponent(actionUrl)
        })
      },
			getUserinfoData() {
				let userInfo = getUserInfoDetail();
				this.userInfo = userInfo;
			},
			async fetchActivityDetail() {
				const [err, data] = await to(getActivityDetail({ activityId: this.params?.id }));
				if(err) {
					return uni.showToast({
						title: err?.msg || '获取活动详情失败',
						icon: 'none'
					});
				}
				console.log(data);
				if(data.success) {
					this.detail = data?.data || {};
				} else {
					return uni.showToast({
						title: data?.msg || '获取活动详情失败',
						icon: 'none'
					});
				}
			},

			// 报名
			async handleSubmit() {
				if(!this.checked) {
					return uni.showToast({
						title: '请先勾选报名须知',
						icon: 'none'
					})
				}

				const [err, data] = await to(userSignUpActivity({
          gender: this.userInfo.gender,
          nickname: this.userInfo.nickname,
          userPhone: this.userInfo.userPhone,
          activityId: this.detail.id,
          idCardNumber: this.userInfo.idCardNumber,
          realName: this.userInfo.realName,
        }));

				if(err) {
					return uni.showToast({
						title: err.msg || '报名失败',
						icon: 'error'
					})
				}
				if(data.success) {
					// uni.showToast({
					// 	title: '报名成功'
					// })
					const { needPay, payResultDTO } = data?.data || {};
					if(needPay) {
						console.log({
									...(payResultDTO?.onlineTradeInfo || {})
							})
							// uni.requestPayment({
							// 	...(payResultDTO?.onlineTradeInfo || {})
							// })
						uni.requestPayment({
							"provider": "wxpay",
							"package": payResultDTO?.onlineTradeInfo?.packageValue,
							"signType": "MD5",
							"paySign": payResultDTO?.onlineTradeInfo?.sign,
							// "orderInfo": {
							...(payResultDTO?.onlineTradeInfo || {}),
							// },
							success(res) {
								console.log(res);
								uni.showToast({
									title: '报名成功',
									icon: 'success'
								})
								uni.navigateBack();
							},
							fail(e) {
								console.log(e)
								uni.showToast({
									title: e?.errMsg || '未知原因失败',
									icon: 'none'
								})
							}
						})
					} else {
            uni.showToast({
              title: '报名成功',
              icon: 'none'
            });
            uni.navigateBack();
          }
				}
			}
		}
	}
</script>

<style>
.mlr-26 {
	margin-left: 26rpx;
	margin-right: 26rpx;
}
.bg-c-f2 {
	background-color: #fff;
}
.br-18 {
	border-radius: 18rpx;
}
.mtb-22 {
	margin-top: 22rpx;
	margin-bottom: 22rpx;
}
.active-item-top {
	display: flex;
	padding: 30rpx 18rpx;
}
.active-item-header {
	width: 200rpx;
	height: 200rpx;
	border-radius: 20rpx;
}
.active-item-right {
	margin-left: 18rpx;
}
.active-item-right-text {
	font-size: 32rpx;
	color: #000;
	margin-bottom: 12rpx;
	display: flex;
	justify-content: space-between;
}
.active-addr {
	margin-top: 22rpx;
	margin-bottom: 24rpx;
}
.content {
	font-size: 28rpx;
	color: #666;
}

.active-addr, .active-time, .active-shop {
	font-size: 24rpx;
	color: #666;
	display: flex;
	align-items: center;
}
.active-shop {
	margin-top: 22rpx;
	margin-bottom: 26rpx;
}
.active-shop image {
	width: 32rpx;
	height: 32rpx;
	border-radius: 16rpx;
}

/* 报名信息 */
.merber-box {
	padding: 30rpx 18rpx;
}
.title {
	font-weight: bold;
	font-size: 32rpx;
  padding-left: 24rpx;
	color: #333;
	margin-bottom: 16rpx;
}
.member-cell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 0rpx;
  margin: 0 24rpx;
  border-bottom: 1rpx solid #EEEEEE;
}
.member-cell text:first-child {
	font-size: 30rpx;
  font-weight: 400;
	color: #333;
}
.member-cell text:last-child {
	font-size: 28rpx;
	color: #333;
  padding-right: 10rpx;
  text-align: right;
}

/* 底部 */
.footer-box {
	padding: 26rpx 24rpx;
	background-color: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(0,0,0,0.02);
}
.footer {
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;
}
.footer image {
	width: 36rpx;
	height: 36rpx;
	margin-right: 12rpx;
}
.footer text {
	font-size: 28rpx;
	color: #000;
}
.footer text:last-child {
	font-size: 28rpx;
	color: #0074fc;
}
.share-btn {
	flex: 1;
}

.footer-btns {
	display: flex;
}
.footer-btn {
	flex: 1;
}
.footer-left {
	width: 280rpx;
	text-align: center;
}
.footer-left view {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.footer-left view text:first-child {
	font-size: 20rpx;
	color: #ffb803;
	font-weight: bold;
}
.footer-left view text:last-child {
	font-size: 40rpx;
	color: #ffb803;
	font-weight: bold;
}
.footer-left > text {
	font-size: 20rpx;
	color: #aaa;
}

</style>
